<template>
  <div class="edit-need-container detailsPageBox">
    <div class="detailsMain">
    <div class="need-title" style="border:none;padding-top: 0;">
      <div class="icon"></div>
      <div>需求基本信息</div>
    </div>

    <div style="display:flex">
      <!-- 技术需求 -->
      <el-form :model="data.form" v-if="data.form.demandTypeId == 1" style="width:40%;max-width: 500px;">
        <el-form-item label="需求名称:">
          <div>{{ data.form.demandTitle }}</div>
        </el-form-item>
        <el-form-item label="截止日期:">
          <div>{{ data.form.demandExpirationDate }}</div>
        </el-form-item>
        <el-form-item label="所属领域:">
          <div>{{ data.industry.industryName1 }}</div>
        </el-form-item>
      </el-form>

      <el-form :model="data.form" v-if="data.form.demandTypeId == 1" style="width:50%;max-width: 700px;">
        <el-form-item label="投资预算(万元):">
          <div>{{ data.form.demandBudget }}</div>
        </el-form-item>
        <el-form-item label="需求所在地:">
          <div>
            {{ data.address.provinceName + data.address.cityName + data.address.areaName + data.address.detailAddress }}
          </div>
        </el-form-item>
      </el-form>
    </div>



    <!-- 科技服务需求 -->
    <div style="display:flex">
      <el-form :model="data.form" v-if="data.form.demandTypeId == 2" style="width:40%;max-width: 500px;">
        <el-form-item label="需求名称:">
          <div style="width:300px">{{ data.form.demandTitle }}</div>
        </el-form-item>
      </el-form>
      <el-form :model="data.form" v-if="data.form.demandTypeId == 2" style="width:50%;max-width: 700px;">
        <el-form-item label="需求所在地:">
          <div style="width: 500px;">
            {{ data.address.provinceName + data.address.cityName + data.address.areaName + data.address.detailAddress }}
          </div>
        </el-form-item>
      </el-form>
    </div>


    <div class="need-title">
      <div class="icon"></div>
      <div class="title">需求详细信息</div>
    </div>

    <div>
      <div>
        <div class="desc-title">需求背景描述</div>
        <div v-html="data.form.demandDescribe"></div>
      </div>
      <div v-if="data.form.demandTypeId == 1">
        <div class="desc-title">拟解决的技术难题</div>
        <div v-html="data.form.demandProblem"></div>
      </div>
      <div v-if="data.form.demandTypeId == 1">
        <div class="desc-title">具体技术指标要求</div>
        <div v-html="data.form.demandTarget"></div>
      </div>
    </div>

    <div class="need-title">
      <div class="icon"></div>
      <div class="title">需求发布方信息</div>
    </div>

    <!-- 联系方式 -->

    <div style="display:flex">
      <el-form :model="data" style="width:40%;max-width: 500px;" v-if="data.userVerify.length>0">
        <el-form-item label="统一社会信用代码:">
          <div>{{ data.userVerify[0].card }}</div>
        </el-form-item>
        <el-form-item label="企业地址:">
          <div>{{ data.userVerify[0].name }}</div>
        </el-form-item>
        <el-form-item label="企业名称:">
          <div>{{ data.userVerify[0].name }}</div>
        </el-form-item>
      </el-form>

      <el-form :model="data.form" style="width:50%;max-width: 700px;">
        <el-form-item label="姓名:">
          <div>{{ data.form.demandContactPerson }}</div>
        </el-form-item>
        <el-form-item label="手机:">
          <div>{{ data.form.demandContactPhone }}</div>
        </el-form-item>
      </el-form>

    </div>
</div>
    <div class="send-btn detailsHandBtn" v-if="props.type == 'detail' ? true : false">
      <el-button type="primary" style="width: 100px;height:36px" @click="exportPDF">导出为PDF</el-button>
      <el-button style="width: 100px;height:36px" @click="backRoute('Demand')">返回</el-button>
    </div>

    <div class="send-btn detailsHandBtn" v-if="props.type == 'check'">
      <el-button type="primary" style="width: 100px;height:36px" @click="isPassInfo(true)">通过</el-button>
      <el-button style="width: 100px;height:36px" @click="isPassInfo(false)">拒绝</el-button>
    </div>


    <el-dialog v-model="data.dialogVisible" width="30%" :before-close="handleClose">
      <template #title>
        <span v-if="data.pass">审核确认</span>
        <span v-if="!data.pass">请填写拒绝原因</span>
      </template>
      <template #default>
        <div v-if="data.pass">你确认《{{ data.form.demandTitle }}》通过审核吗？</div>
        <div v-if="!data.pass">
          <el-input type="textarea" :rows="4" v-model="data.refuseInfo" resize="none"></el-input>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="pass">确定</el-button>
          <el-button @click="data.dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { onMounted, reactive, onUnmounted} from 'vue'
import { demandDetailApi, auditDemandApi } from '@/api/interface/demand.js' //需求
import { textToSensitiveWordApi } from '@/api/interface/algorithm.js'


import { ElMessage } from 'element-plus'
import {backRoute} from '@/utils/common.js'

import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const store = useStore()
const router = useRouter()
const route = useRoute()


const props = defineProps({
    id: {
        type: String,
    },
    type: {
        type: String,
    },
})

const data = reactive({
  address: {
    provinceCode: '',
    cityCode: '',
    areaCode: '',
    provinceName: '',
    cityName: '',
    areaName: '',
    detailAddress: '',
  },
  industry: {
    industryCode1: '',
    industryCode2: '',
    industryCode3: '',
    industryName1: '',
    industryName2: '',
    industryName3: '',
  },
  form: {},
  userVerify:[],
  dialogVisible: false,
  pass: false,
  refuseInfo: '',
})

onMounted(() => {
  const level = router.currentRoute.value.meta.level
  store.dispatch('setting/setRouterCut', level)
})
onUnmounted(() => {
  store.dispatch('setting/setRouterCut', 2)
})

const getDetail = () => {
  demandDetailApi({ id: props.id?props.id:sessionStorage.demandId }).then(res => {
    if (res.status === 200) {
      data.form = res.data

      data.address.provinceCode = res.data.demandProvinceCode
      data.address.cityCode = res.data.demandCityCode
      data.address.areaCode = res.data.demandAreaCode
      data.address.detailAddress = res.data.detailAddress
      data.address.provinceName = res.data.demandProvinceName
      data.address.cityName = res.data.demandCityName
      data.address.areaName = res.data.demandAreaName
      data.address.detailAddress = res.data.detailAddress

      data.industry.industryCode1 = res.data.industryCodeOne
      data.industry.industryCode2 = res.data.industryCodeTwo
      data.industry.industryCode3 = res.data.industryCodeThree
      data.industry.industryName1 = res.data.industryNameOne
      data.industry.industryName2 = res.data.industryNameTwo
      data.industry.industryName3 = res.data.industryNameThree

      data.userVerify = res.data.userVerify
      console.log(data.userVerify);
    }
  })
}
getDetail()


//导出PDF
const exportPDF = () => {
  console.log('打印');

}




const isPassInfo = (bool) => {
  data.pass = bool
  data.dialogVisible = true
}


//通过
const pass = async () => {
  // const safe =  await textToSensitiveWordApi(
  //   {
  //     data:data.form.demandTitle + data.form.detailAddress + data.form.demandDescribe + 
  //     data.form.demandTarget + data.form.demandCase + data.form.demandPublishPerson,
  //   }
  // ).then(res => res.data.sensitive_word)
  
  // if (safe.length > 0) {
  //   ElMessage({
  //       message: '含有敏感字符'+ safe.join('，'),
  //       type: 'error',
  //     })
  //   return
  // }
  const params = {
    auditBusinessNum: props.id,
    auditContent: data.pass ? "审核通过" : data.refuseInfo,
    auditType: data.pass ? "SUCCESS" : 'BACK',
    userName: store.state.user.userInfo.userName
  }
  auditDemandApi(JSON.stringify(params)).then(res => {
    if (res.status === 200) {
      data.dialogVisible = false
      ElMessage({
        message: res.message,
        type: 'success',
      })
backRoute('Demand')
    }
  })
}

</script>

<style lang="scss" scoped>
.edit-need-container {
  height: 100%;
  padding: 20px;
  color: #333;

  ::v-deep .el-form-item__label {
    font-weight: 700;
  }

  .el-form-item {
    margin-bottom: 0px;
  }
  :deep(.el-form-item__content){
    font-size: 12px;
  }
  .el-form {
    margin-bottom: 20px;
  }

  .desc-title {
    font-size: 14px;
    color: #00A2FF;
    font-weight: 700;
  }

  .need-title {
    display: flex;
    align-items: center;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 700;
    border-top: 1px solid #e3e3e3;

    .icon {
      width: 6px;
      height: 16px;
      background: #00a2ff;
      margin-right: 6px;
    }
  }

  .send-btn {
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid #e3e3e3;
  }
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
}
</style>